<div class="container-fluid">

    <!-- Page Heading -->
    <div class="row">
        <div class="col-xl-12">
            <h2 class="page-header">
                Bootstrap Grid
            </h2>
            <ol class="breadcrumb">
                <li>
                    <i class="fa fa-dashboard"></i>  <a href="Javascript:void(0)" routerLink="/dashboard/home">Dashboard</a>
                </li>
                <li class="active">
                    <i class="fa fa-wrench"></i> Bootstrap Grid
                </li>
            </ol>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-xl-12 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-12
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-xl-6 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-6
                </div>
            </div>
        </div>
        <div class="col-xl-6 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-6
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-xl-4 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-4
                </div>
            </div>
        </div>
        <div class="col-xl-4 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-4
                </div>
            </div>
        </div>
        <div class="col-xl-4 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-4
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-xl-3 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-3
                </div>
            </div>
        </div>
        <div class="col-xl-3 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-3
                </div>
            </div>
        </div>
        <div class="col-xl-3 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-3
                </div>
            </div>
        </div>
        <div class="col-xl-3 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-3
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-xl-2 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-2
                </div>
            </div>
        </div>
        <div class="col-xl-2 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-2
                </div>
            </div>
        </div>
        <div class="col-xl-2 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-2
                </div>
            </div>
        </div>
        <div class="col-xl-2 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-2
                </div>
            </div>
        </div>
        <div class="col-xl-2 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-2
                </div>
            </div>
        </div>
        <div class="col-xl-2 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-2
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
        <div class="col-xl-1 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-1
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-xl-8 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-8
                </div>
            </div>
        </div>
        <div class="col-xl-4 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-4
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-xl-3 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-3
                </div>
            </div>
        </div>
        <div class="col-xl-6 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-6
                </div>
            </div>
        </div>
        <div class="col-xl-3 text-xs-center">
            <div class="card card-default">
                <div class="card-block">
                    .col-xl-3
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

</div>